<template>
	<view class="container">
		<view class="pic-box">
			<view class="pic b-b">
				<image :src="image" mode="aspectFit" class="image" @tap="previewImage"></image>
			</view>
			<view class="pic-oper">
				<view class="pic-oper-out">
					<view class="pic-oper-left" @tap="chooseImage(0)">
						<text class="iconfont icon-paizhao"></text>
						<text>相册选择</text>
					</view>
					<view class="pic-oper-center"></view>
					<view class="pic-oper-right" @tap="chooseImage(1)">
						<text class="iconfont icon-xiangce"></text>
						<text>拍照上传</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-bottom">
			<text class="mix-btn" @click="save">保存</text>
		</view>
		
	</view>
</template>

<script>
	import {
	    mapState 
	} from 'vuex';  
	export default {
		data() {
			return {
				type:-1, //1:线下店铺门头照 2：线下店铺营业执照 3：线下店铺手持身份证 4:线上店铺门头照 5：线上店铺营业执照
				image:'',
				haspic:false,
				shopinfo:''
				
			};
		},
		onLoad(options){
			this.type = options.type;
			
				this.loadMerchantData();
			
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			// loadShopData(){
			// 	this.$http.get('/ShopInfo',{}).then(res=>{
			// 		let shopinfo = res.data.shopinfo;
			// 		if(this.type == 4){
			// 			if(shopinfo.first_image != ""){
			// 				this.image =shopinfo.first_image;
			// 			}else{
			// 				this.image = 'https://nkyzapi.njkw668.com/static/sample/sample-door.png';
			// 			}
			// 		}else if(this.type == 5){
			// 			if(shopinfo.LicensePic != ""){
			// 				this.image = this.$image + "/shop/" + shopinfo.LicensePic;
			// 			}else{
			// 				this.image = 'https://nkyzapi.njkw668.com/static/sample/sample-license.png';
			// 			}
			// 		}
			// 	})
			// },
			async loadMerchantData(){
				this.$api.get({
					url: '/wanlshop/Small/shopinfo',
					success: res => {
					let shopinfo = res;
					this.shopinfo=shopinfo;
					if(shopinfo != ""){
						if(this.type == 1){
							if(shopinfo.shop_photo != ""){
								this.image =  shopinfo.shop_photo;
							}else{
								this.image = 'https://nkyzapi.njkw668.com/static/sample/sample-door.png';
							}
						}else if(this.type == 7){
							if(shopinfo.yingyezhizhao != ""){
								this.image = shopinfo.yingyezhizhao;
							}else{
								this.image = 'https://nkyzapi.njkw668.com/static/sample/sample-license.png';
							}
						}else if(this.type == 6){
							if(shopinfo.zizi != ""){
								this.image = shopinfo.zizi;
							}else{
								this.image = 'https://nkyzapi.njkw668.com/static/sample/sample-card.png';
							}
						}else if(this.type == 4){
							if(shopinfo.first_image != ""){
								this.image =shopinfo.ffirst_image;
							}else{
								this.image = 'https://nkyzapi.njkw668.com/static/sample/sample-license.png';
							}
						}else if(this.type == 2){
							if(shopinfo.yingyezhizhao != ""){
								this.image =shopinfo.yingyezhizhao;
							}else{
								this.image = 'https://nkyzapi.njkw668.com/static/sample/sample-license.png';
							}
						}
						else if(this.type == 3){
							if(shopinfo.z_card != ""){
								this.image =shopinfo.z_card;
							}else{
								this.image = 'https://nkyzapi.njkw668.com/static/sample/sample-license.png';
							}
						}
						
					}else{
						this.image = 'https://nkyzapi.njkw668.com/static/sample/sample-license.png';
					}
				}
			})
			},
			
			chooseImage(type) {
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: type == 0 ? ['album'] : ['camera'], //album 从相册选图，camera 使用相机，默认二者都有
					success: (res)=> {
						this.image = res.tempFilePaths[0];
						this.haspic = true;
					}
				});
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				let urls = [];
				urls.push(this.image);
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
			save(){
				if(this.haspic == false){
					this.$wanlshop.msg('请上传对应的照片');
					return;
				}
				uni.showLoading({
					title:"提交中...",
					mask:true
				})
				console.log('1111'),
				console.log(this.type)
				// upload
				this.$api.upload({
					url: 'https://fastadmin.njkw668.com/api/wanlshop/User/shopImgUpload',
					filePath: this.image,
					name: 'file',
					formData:{
						"type":this.type,
					},
					success: data => {
						uni.hideLoading();
						if(this.type==6||this.type==7){
							uni.navigateTo({
								url:'/pages/user/merchant/shopinfo'
							})
						}
						if(this.type==4){
							// uni.navigateBack();
							uni.navigateTo({
								url:'/pages/user/merchant/orderstep3'
							})
						}
						if(this.type==1){
							// uni.navigateBack();
							uni.navigateTo({
								url:'/pages/user/merchant/orderstep3'
							})
						}
						if(this.type==2){
							// uni.navigateBack();
							uni.navigateTo({
								url:'/pages/user/merchant/orderstep3'
							})
						}
						if(this.type==3){
							// uni.navigateBack();
							uni.navigateTo({
								url:'/pages/user/merchant/orderstep3'
							})
						}
						
					},
					fail: (err) => {
						uni.hideLoading();
						this.$wanlshop.msg('图片上传失败');
						
						
					}
				});
			
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.btn-bottom{
		position: absolute;
		bottom: 0upx;
		margin: auto;
		left: 0;
		right: 0;
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	.pic-box{
		background-color: #fff;
		margin: 20upx 20upx;
		height: 550upx; 
		.pic{
			height: 450upx;
			position:relative;
			display: flex;
			justify-content: center;
			align-items: center;
			&.b-b:after{
				left: 0upx;
			}
			.image{
				height: 100%;
			}
		}
		.pic-oper{
			text-align: center;
			.pic-oper-out{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				height: 100upx;
				line-height: 100upx;
				.pic-oper-left{
					width: 200upx;
					height: 68upx; 
					color:#FFFFFF;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					background-color: #F8A626;
					border-radius: 8upx;
				}
				.pic-oper-right{
					width: 200upx;
					height: 68upx; 
					color:#FFFFFF;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					background-color: #E62130;
					border-radius: 8upx;
				}
				.pic-oper-center{
					width: 60upx;
				}
				
			}
		}
		
	}
	.icon-xiangce:after{ 
		content: "\e642";
		padding-right: 20upx;
	}
	.icon-paizhao:after{
		content: '\e677';
		padding-right: 20upx;
	}
</style>
